<template>
  <div id="flowHeader" class="flow-header">
    <ul class="flow-menu">
      <li v-for="(item,index) in flowMenu" :key="item.key" @click="clickRunButtom(item.key)">{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
  import { mapState, mapMutations } from 'vuex';
  import axios from 'axios';

export default {
  name: 'flowHeader',
  data() {
    return {
      flowTitle: '未命名表单',
      flowMenu: [{
        name: '文件',
        key:'files'
      }, {
        name: '保存',
        key:'save'
      },{
        name:'运行',
        key:'run'
      }],
      bpm:[]
    };
  },
  computed: {
    ...mapState('flow', ['nodeData']),
  },
  methods:{
    ...mapMutations('flow', ['UPDATE_NODE']),
    clickRunButtom(key){
      if(key==='run'){
        let startNode;
        let startLine;
        //获取Start控件的id
        let nodesObj=this.$store.state.flow.nodeData;
        let nodesId=Object.keys(nodesObj);
        let nodeStartsId=[];
        for(let i=0;i<nodesId.length;i++){
          if(nodesObj[nodesId[i]].type=='start'){
            nodeStartsId.push(nodesId[i])
          }
        }

        let tempList={};
        let temp;
        let lineObj=this.$store.state.flow.lineData;
        let lineId=Object.keys(lineObj);
        let attr;
        for(let j=0;j<lineId.length;j++){
          temp={};
          for(let k=0;k<nodeStartsId.length;k++){
            //获得起始的node和line
            if(lineObj[lineId[j]].startId==nodeStartsId[k]){
              startNode=nodeStartsId[k];
              startLine=lineId[j];
            }
          }
          attr=lineObj[lineId[j]].startId;
          if(tempList[attr]==undefined){
            tempList[attr]=[];
          }
          temp[lineObj[lineId[j]].text==''?'next':lineObj[lineId[j]].text]=lineObj[lineId[j]].endId;
          tempList[attr].push(temp);
        }
        let id;
        let nextNodesId=[];
        let nodeList=[];
        for(let i=0;i<Object.keys(tempList).length;i++){
          id=Object.keys(tempList)[i];
          this.UPDATE_NODE({
            [id]: {
              ...this.nodeData[id],
              nextNodesId:tempList[id]
            }
          });
          nodeList.push(this.nodeData[id]);
        }
        //可以向后台传递此数据-> this.nodeData


        let msg={
          startId:startNode,
          message:{
            nodeList:nodeList
          }
        }
        console.log('all',msg)
        axios({
          method:"post",
          url:"http://localhost:8888/SunRPA/bpm.do",
          params:msg
        })
          .then((res) => {
            console.log('res',res)
          })
          .catch((err) => {
            console.log('链接失败！')
          });

      }
    }
  }
};
</script>

<style lang="scss">
.flow-header {
  background: #1f88d6;
  color: #fff;
  display: flex;
  align-items: center;
  padding-left: 15px;
  .flow-title {
    padding: 2px 8px;
    font-size: 16px;
  }
  .flow-menu {
    display: flex;
    li {
      padding: 6px 8px;
      font-weight: bold;
      cursor: pointer;
    }
  }
}
</style>